<template>
  <div class="container">
    <toolbar :back="true" :title="$route.meta.title"></toolbar>
    <div class="t-container _m-2 chapter">
      <scroll :data="chapterList" :loading="true" @loadMore="loadMore">
        <ul class="p-2">
          <router-link tag="li" :to="'/books/reader/' + search.bookId + '/' + chapter.id" v-for="chapter in chapterList" :key="chapter.id" class="d-flex border-bottom justify-content-between ">
            <h2>{{chapter.chapterName}}</h2>
            <span class="is_free"></span>
          </router-link>
        </ul>
      </scroll>
    </div>
  </div>
</template>

<script>
import Toolbar from '../../components/Toolbar'
import Scroll from "components/Scroll";

import {getChapterList} from 'api/ChapterApi'

export default {
  name: 'ChapterIndex',
  components: {
    Toolbar,
    Scroll
  },
  data () {
    return {
      search: {
        bookId : 0,
        currentIndex: 1,
        pageSize: 40
      },
      chapterList: [],
      totalPage: 1
    }
  },
  methods: {
    getChapterByBookId() {
      getChapterList(this.search).then(res => {
        if(res.meta.success) {
          this.chapterList = this.chapterList.concat( res.data.datas);
          this.totalPage = res.data.pagination.totalPage
        }
      });
    },
    loadMore (currentIndex, $scroll) {
      this.search.currentIndex = currentIndex;
      if(this.search.currentIndex <= this.totalPage) {
        this.getChapterByBookId()
      } else  $scroll.forceUpdate();
    }
  },
  created () {
    const booksId = this.$route.params.bookId;
    this.search.bookId = booksId;
    this.getChapterByBookId();
  }
}
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl'
.chapter {
  background #FFF
  li {
    height 40px
    line-height 40px
    margin-left 20px
    padding-right 10px
  }
}
</style>
